<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>资源管理系统</title>
    <!--图标样式-->
    <link rel="stylesheet" href="../../static/css/layui.css" th:href="@{/css/layui.css}">
    <link rel="stylesheet" href="../../static/front/css/font-awesome.css" th:href="@{/front/css/font-awesome.css}">
    <link rel="stylesheet" href="../../static/sign/css/css.css" th:href="@{/sign/css/css.css}">
	<link rel="stylesheet" href="../../static/sign/css/main.css" th:href="@{/sign/css/main.css}">
	<link rel="stylesheet" href="../../static/sign/css/util.css" th:href="@{/sign/css/util.css}">
    <link rel="stylesheet" href="../../static/sign/css/style.css" th:href="@{/sign/css/style.css}">
    <link rel="stylesheet" href="../../static/sign/css/iconic/css/material-design-iconic-font.min.css" th:href="@{/sign/css/iconic/css/material-design-iconic-font.min.css}">
    <style>
        h1,h2,h3{
            font-size: 30px;
        }
    </style>
</head>
<body class="vsc-initialized">
    <h2 style="margin-bottom: 1.25rem;">资源管理系统</h2>
    <div class="container" id="container">
        <div class="form-container sign-up-container">
            <form id="signupForm">
                <h1 style="margin-bottom: 1.25rem;">注册</h1>
				<div class="wrap-input100 validate-input m-b-23" data-validate="请输入名称">
				    <input class="input100" type="text" name="name" placeholder="请输入名称" autocomplete="off">
				    <span class="focus-input100" data-symbol="&#xf1ff;"></span>
				</div>
				<div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
				    <input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off">
				    <span class="focus-input100" data-symbol="&#xf206;"></span>
				</div>
				<div class="wrap-input100 validate-input" data-validate="请输入密码">
				    <input class="input100" type="password" name="password" placeholder="请输入密码">
				    <span class="focus-input100" data-symbol="&#xf190;"></span>
				</div>
                <button type="button" style="margin-top: 1.25rem;" id="register">注册</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form id="signinForm">
                <h1 style="margin-bottom: 1.25rem;">登录</h1>
                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
                    <input name="username" class="input100" type="text" placeholder="请输入用户名" autocomplete="off" value="member">
                    <span class="focus-input100" data-symbol="&#xf206;"></span>
                </div>
                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入密码">
                    <input name="password" class="input100" type="password" placeholder="请输入密码" autocomplete="off" value="123456">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                </div>
                <div class="wrap-input100 validate-input" data-validate="请输入验证码" style="width: 50%;right: 75px;float: left">
                    <input class="input100" type="tel" name="verify" id="verify" placeholder="验证码">
                    <span class="focus-input100" data-symbol="&#xf158;"></span>
                    <div style="position: relative;bottom: 65px;left: 100%">
                        <a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">
                            <img style="margin-top: 12px;" id="imgVerify" src="" alt="更换验证码" height="36" width="100%" onclick="getVerify(this);">
                        </a>
                    </div>
                </div>


                <button type="button" style="margin-top: 1.25rem;" id="login">登录</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>欢迎回来！</h1>
                    <p style="color: #f5f5f5;">请您先登录的个人信息，进行操作。</p>
                    <button class="ghost" id="signIn">登录</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>你好朋友！</h1>
                    <p style="color: #f5f5f5;">输入您的个人信息注册成为会员。</p>
                    <button class="ghost" id="signUp">注册</button>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p>
            Copyright © 2019.Company name All rights reserved.More Templates <span style="color: #ffd900;">[空白]</span>
        </p>
    </footer>
    <script src="../../static/sign/js/index.js" th:src="@{/sign/js/index.js}"></script>
    <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
    <script src="/js/plugins/validate/jquery.validate.min.js" th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
    <script type="text/javascript">
        var ctx = "/sign"
        $(document).ready(function () {
            $("#login").on('click', function () {
                $("#signinForm").submit();
            });
            $("#register").on('click', function () {
                $("#signupForm").submit();
            });
            validateRule();
            $("body").keydown(keyDownLogin);
            $("#imgVerify").click()
        });

        $.validator.setDefaults({
            submitHandler: function (form) {
                // 判断当前提交的表单是登录还是注册操作
                if (form.id == "signinForm") {
                    login();
                } else if (form.id == "signupForm") {
                    register()
                }
            }
        });

        function login() {
            // 执行加载层
            var index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            $.ajax({
                type: "POST",
                url: ctx + "/login",
                data: $('#signinForm').serialize(),
                success: function (r) {
                    if (r.code == 0) {
                        layer.msg(r.msg, {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            parent.location.href = '/front/index';
                        });
                    } else {
                        // 关闭加载层
                        layer.msg(r.msg);
                        layer.close(index);
                    }
                },
            });
        }

        function register() {
            // 执行加载层
            var index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            $.ajax({
                type: "POST",
                url: ctx + "/register",
                data: $('#signupForm').serialize(),
                success: function (r) {
                    if (r.code == 0) {
                        layer.msg(r.msg, {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            $('#container').removeClass("right-panel-active");
                        });
                        layer.close(index);
                    } else {
                        // 关闭加载层
                        layer.msg(r.msg);
                        layer.close(index);
                    }
                },
            });
        }

        function keyDownLogin() {
            if (event.keyCode == "13") {
                $("#login").trigger('click');
            }
        }

        function validateRule() {
            var icon = "<i class='fa fa-times-circle' style='color: red'></i> ";
            $("#signinForm").validate({
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    }
                },
                messages: {
                    username: {
                        required: icon + "请输入您的用户名",
                    },
                    password: {
                        required: icon + "请输入您的密码",
                    }
                }
            })
            $("#signupForm").validate({
                rules: {
                    name: {
                        required: true
                    },
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: icon + "请输入您的昵称",
                    },
                    username: {
                        required: icon + "请输入您的用户名",
                    },
                    password: {
                        required: icon + "请输入您的密码",
                    }
                }
            })
        }

        //获取验证码
        function getVerify(obj) {
            obj.src = "/getVerify?" + Math.random();
        }
    </script>
</body>

</html>